import { useState } from "react";
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import NotFound from "./pages/NotFound";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";
import * as Custom from "./Button";

function App() {
  const [clickNum, setClickNum] = useState(0);

  const handleClick = () => {
    setClickNum(clickNum + 2);
  };

  return (
    <>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <Custom.Button clickNum={clickNum} onClick={handleClick}></Custom.Button>
      <Custom.Button clickNum={clickNum} onClick={handleClick}></Custom.Button>
      <Custom.Text></Custom.Text>
      <Custom.List></Custom.List>
      <BrowserRouter>
        <nav>
          <Link to="/">首页</Link> | <Link to="/about">关于</Link>
        </nav>

        <Routes>
          <Route path="/" element={<Home></Home>}></Route>
          <Route path="/about" element={<About></About>}></Route>
          <Route path="*" element={<NotFound></NotFound>}></Route>
        </Routes>
      </BrowserRouter>
    </>
  );
}

export default App;
